<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>happpy birthday</title>
    <style>
        .container{
            width:100px;
            height:1500px;
        }
        .date p{
            font-size:30px;
            font-weight:bald;
            background-color:#87CEFA;
            color:#000099;
            text-align:center;
            margin-bottom:-60px;
            border-radius:30px;
        }  
        .word p{
            margin-left:100px;
        }
        .all{
            display:flex;
            flex-direction:column;
            width:220px;
            height:450px;
            font-size:50px;
            font-style:italic;
            text-shadow:3px 5px 4px #800080;
            background:linear-gradient(to right bottom,#FFC0CB,#EE82EE,#7B68EE);
            color:#FF1493;
            border-radius:20px;
            margin-bottom:-100px;
            text-align:center;
            flex:
        }
        .all .one{
            align-self:flex-start;
            background-color:#FFC0CB;
            border-radius:35px;
            height:80px;
            width:80px;
            margin:0;
            padding:0;
            box-shadow:3px 5px 2px 1px #DDA0DD;
        }
        .all .two{
            align-self:center;
            background-color:#FFC0CB;
            border-radius:35px;
            height:80px;
            width:80px;
            margin:0;
            padding:0;
            box-shadow:3px 5px 2px 1px #DDA0DD;
        }
        .all .three{
            align-self:flex-end;
            background-color:#FFC0CB;
            border-radius:35px;
            height:80px;
            width:80px;
            margin:0;
            padding:0;
            box-shadow:3px 5px 2px 1px #DDA0DD;
        }
        .all2 .four{
            align-self:flex-start;
            background-color:#FFC0CB;
            border-radius:35px;
            height:80px;
            width:80px;
            margin:0;
            padding:0;
            font-size:50px;
            font-style:italic;
            text-shadow:3px 5px 4px #800080;
            color:#FF1493;
            text-align:center;
            margin-top:-60px;
            box-shadow:3px 5px 2px 1px #DDA0DD;
        }
        .cake img{
            height:110px;
            width:110px;
            border-radius:20px;
            margin-top:-2000px;
            transform:rotate(30deg);
        }
        .photo img{
            height:170px;
            width:80px;
            margin-left:140px;
            margin-top:-150px;
            border-radius:20px;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="date">
            <p>11.05</p>
        </div>
        <div class="word">
            <p><b><i>Daddy,happy birthday</i></b></p>
        </div>
        <div class="all">
            <div class="one">
                <div class="word first">生</div>
            </div>
            <div class="two">
                <div class="word two">日</div>
            </div>
            <div class="three">
                <div class="word three">快</div>
            </div>
        </div>
        <div class="cake">
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg30.360buyimg.com%2Fn7%2Fjfs%2Ft1%2F209673%2F12%2F15188%2F83950%2F61d8187aE83318773%2Fadd905dc24948d01.jpg&refer=http%3A%2F%2Fimg30.360buyimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670203075&t=be2d746153c0a5e628f0b305c0e0782c">
        </div>
        <div class="all2">
            <div class="four"><p>乐</p></div>
        </div>
        <div class="photo">
            <img src="https://img2.baidu.com/it/u=937691331,26945258&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1014">
        </div>
    </div>
</body>
</html>